<template>
<div style="height:6vh;background-color: #fff;padding: 10px 20px;">
  <span style="line-height: 60px;font-size: 20px">车辆管理</span>
  <el-button type="primary" style="float: right;margin-top:13px" @click="add_button">新建车辆</el-button>
</div>
  <el-dialog
      v-model="dialog_vehicle"
      :title="dialog_title"
      style="width: 1000px;padding: 40px"
      :before-close="dialog_close">
    <el-form label-width="80px" label-position="top">
      <el-row :gatter="30">
        <el-col :span="12">
          <el-form-item label="汽车品牌">
            <el-input placeholder="请输入汽车品牌"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆牌号">
            <el-input placeholder="请输入车牌号"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gatter="30">
        <el-col :span="12">
          <el-form-item label="车辆型号">
            <el-input placeholder="请输入汽车型号"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆识别码">
            <el-input placeholder="请输入车辆识别码"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gatter="30">
        <el-col :span="12">
          <el-form-item label="车辆排量">
            <el-select placeholder="请选择">
              <el-option label="1.6" value="1" />
              <el-option label="2.5" value="2" />
              <el-option label="4" value="3" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆类型">
            <el-select placeholder="请选择">
              <el-option v-for="item in vehicle_type_arr" />

            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gatter="30">
        <el-col :span="12">
          <el-form-item label="车身颜色">
            <el-select placeholder="请选择">
              <el-option v-for="item in vehicle_color_arr" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="里程数">
            <el-input placeholder="请输入内容"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gatter="30">
        <el-col :span="12">
          <el-form-item label="购买时间">
            <el-date-picker
                type="date"
                placeholder="购买时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上牌时间">
            <el-date-picker
                type="date"
                placeholder="购买时间"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gatter="30">
        <el-col :span="12">
          <el-form-item label="购买价格">
            <el-input placeholder="请输入购买价格"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-select placeholder="请选择电池类型">
              <el-option v-for="item in vehicle_battery_type_arr"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="dialog_close">取消</el-button>
      <el-button @click="save_vehicle" type="primary">确认</el-button>
    </template>
  </el-dialog>
  <!--  车辆搜索  -->
    <el-card style="margin:20px;height: 70px;">
        <el-form :inline="true">
            <el-form-item label="车辆品牌">
                <el-input @keydown.enter="load_vehicle" v-model="searchVehicleForm.brand" placeholder="请输入内容" style="width:220px;"></el-input>
            </el-form-item>
            <el-form-item label="车牌号" style="width:290px;">
                <el-input v-model="searchVehicleForm.license" placeholder="请输入内容" style="width:220px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="reset_search">重置</el-button>
                <el-button @click="load_vehicle" type="primary">查询</el-button>
            </el-form-item>
        </el-form>
    </el-card>
  <!-- 车辆列表 -->
    <el-card style="margin:20px;">
        <el-table :data="vehicleArr" height="580px">
            <el-table-column type="index" label="编号" width="80" align="center"/>
            <el-table-column prop="brand" label="车辆品牌" align="center"/>
            <el-table-column prop="license" label="车牌号" align="center"/>
            <el-table-column prop="code" label="车辆识别码" align="center"/>
            <el-table-column prop="type" label="车辆类型" align="center" :formatter="vehicle_type_formatter"/>
            <el-table-column prop="price" label="购买价格" align="center"/>
            <el-table-column prop="buyTime" label="购买时间" align="center"/>
            <el-table-column prop="regTime" label="上牌时间" align="center"/>
            <el-table-column prop="batteryType" label="电池类型" align="center" :formatter="battery_type_formatter"/>
            <el-table-column prop="status" label="车辆状态" align="center" :formatter="vehicle_status_formatter"/>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="edit_vehicle(scope.row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="delete_vehicle(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>


</template>
<script setup>


import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
const searchVehicleForm = ref({brand:'',license:''})
const reset_search = ()=>{
    searchVehicleForm.value = {brand:'',license:''}
    load_vehicle()
}
const vehicleArr = ref([])
const load_vehicle = ()=>{
    let data = qs.stringify(searchVehicleForm.value)
    axios.get(BASE_URL+'/v1/vehicle/select?'+data)
        .then((response)=>{
            if(response.data.code===2000){
                vehicleArr.value=response.data.data
            }else{
                ElMessage.error(response.data.msg)
            }
        })
}
</script>


<style scoped>

</style>